<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/element-plus.css"/>
</head>
<body>
<div id="app">
    <!--:data 绑定表格要显示的内容 el-table-column prop 绑定 每一个对象的属性名 label 显示的列名 width 指定宽度 -->
    <el-table :data="tableData" stripe style="width: 80%">
        <el-table-column prop="id" label="id" width="80"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称" width="180"></el-table-column>
        <el-table-column prop="goodsPrice" label="商品价格"></el-table-column>
        <el-table-column prop="categoryId" label="分类编号"></el-table-column>
        <el-table-column label="操作" width="120">
            <template #default>
                <el-button link type="primary" size="small">修改</el-button>
                <el-button link type="primary" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
<script src="./js/vue.js"></script>
<script src="./js/element-plus.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                span: 20,
                tableData: []
            }
        },
        methods: {
            getData() {
                console.log("getData")
                fetch("http://localhost:8080/list").then(res => {
                    return res.json()
                }).then(res => {
                    console.log(res)
                    this.tableData = res.data
                }).catch(err => {
                    console.log(err)
                })
            }
        },
        created() {
            this.getData()
        }
    })
    // 使用 element-plus 的组件库
    app.use(ElementPlus)
    app.mount("#app")
</script>
</body>
</html>